<template>
  <div style="pointer-events: all;position: absolute; right: 27px; bottom: 93px;z-index: -1;" :style="{bottom: bottom}">

    <a-popover id="mapPop" dsf=" sdfsdf " title="更换地图样式">
      <template #content>

        <div id="map-styles">
          <div class="input-item"><input
            type="radio"
            name="mapStyle"
            :checked="mapStyle.normal || false"
            @click="setStyle('normal')"><span>标准</span><span class="input-text">dark</span></div>
          <div class="input-item"><input
            type="radio"
            name="mapStyle"
            :checked="mapStyle.dark || false"
            @click="setStyle('dark')"><span>幻影黑</span><span class="input-text">dark</span></div>
          <div class="input-item"><input
            type="radio"
            name="mapStyle"
            :checked="mapStyle.fresh || false"
            @click="setStyle('fresh')"><span>草色青</span><span class="input-text">fresh</span></div>
          <div class="input-item"><input
            type="radio"
            name="mapStyle"
            :checked="mapStyle.grey || false"
            @click="setStyle('grey')"><span>雅士灰</span><span class="input-text">grey</span></div>
          <div class="input-item"><input
            type="radio"
            name="mapStyle"
            :checked="mapStyle.blue || false"
            @click="setStyle('blue')"><span>靛青蓝</span><span class="input-text">blue</span></div>
          <div class="input-item"><input
            type="radio"
            name="mapStyle"
            :checked="mapStyle.darkblue || false"
            @click="setStyle('darkblue')"><span>极夜蓝</span><span class="input-text">darkblue</span></div>
        </div>
      </template>
      <a-button type="link" style="color: rgb(124,150,255);">风格</a-button>
    </a-popover>
  </div>
</template>
<script setup>
import { defineProps, watch, ref } from 'vue'

const props = defineProps({
    catMap: Object,
    bottom: {
      type: String,
      default: '93px'
    }
})

watch(() => props.catMap, (newValue) => {
	setTimeout(() => {
    getStyle()
  }, 500)
})

const mapStyle = ref({
  normal: false, dark: false, fresh: false, grey: false, blue: false, darkblue: false
})

const getStyle = () => {
  if (localStorage.styleName) {
    props.catMap.setMapStyle(localStorage.styleName)
    const mapStyleType = localStorage.styleName.replace('amap://styles/', '')
    mapStyle.value[mapStyleType] = true
  }
}

const setStyle = (val) => {
  var styleName = 'amap://styles/' + val
  localStorage.styleName = styleName
  props.catMap.setMapStyle(styleName)
}
</script>
